<template>
	<div>
		<div class="address">
			<div>
				<p>您当前所在位置</p>
				<router-link to="/" class="link">售后订单</router-link>
			</div>
		</div>
		<div class="my_after_sales">
			<a-tabs @change="updateorderType">
				<a-tab-pane key="0" tab="面料订单"  >
					<div class="query">
						<a-range-picker class="marg20" style="height: 38px;"  :locale="locale">
							<a-icon slot="suffixIcon" type="calendar" />
						</a-range-picker>
						<a-select default-value="lucy" style="width: 238px" class="marg20" >
							<a-select-option value="jack">
								已提交
							</a-select-option>
							<a-select-option value="lucy">
								已接单
							</a-select-option>
							<a-select-option value="Yiminghe">
								修剪中
							</a-select-option>
							<a-select-option value="Yiminghe1">
								已拒绝
							</a-select-option>
						</a-select>
						<a-input placeholder="请输入订单编号" class="marg20" style="width: 238px" />
						<a-button type="primary" class="marg20" size="Large">
							查询
						</a-button>
						<a-button type="primary" class="marg20" size="Large" @click="xinzengmianliao">
							新增售后
						</a-button>
					</div>
					<a-table class="table1" lign="center" :columns="columns" :data-source="data">
						
						<!-- <router-link to="/MyAfterSales/AfterSaleFabric" slot="k8" slot-scope="text" style="color:#C49D18">{{ text }}</router-link> -->
						<router-link :to="{path:'/MyAfterSales/AfterSaleFabric',query:{id:k7}}" slot="k8" slot-scope="text" style="color:#C49D18">查看售后订单</router-link>
						<a slot="k7" slot-scope="text1" style="color:#C49D18">{{ text1 }}</a>
					
					</a-table>
				</a-tab-pane>
				<a-tab-pane key="1" tab="个定订单" force-render  >
					<div class="query">
						<a-range-picker class="marg20" :locale="locale">
							<a-icon slot="suffixIcon" type="calendar" />
						</a-range-picker>
						<a-select default-value="lucy" style="width: 238px" class="marg20" >
							<a-select-option value="jack">
								已提交
							</a-select-option>
							<a-select-option value="lucy">
								已接单
							</a-select-option>
							<a-select-option value="Yiminghe">
								修剪中
							</a-select-option>
							<a-select-option value="Yiminghe1">
								已拒绝
							</a-select-option>
						</a-select>
						<a-input placeholder="请输入订单编号" class="marg20" style="width: 238px" />
						<a-button type="primary" class="marg20" size="Large">
							查询
						</a-button>
						<a-button type="primary" class="marg20" size="Large">
							新增售后
						</a-button>
					</div>
					<a-table class="table1" lign="center" :columns="columns1" :data-source="data">
						<!-- <router-link to="/MyAfterSales/AfterSaleGeding" slot="k8" slot-scope="text" style="color:#C49D18">{{ text }}</router-link> -->
						<router-link :to="{path:'/MyAfterSales/AfterSaleGeding',query:{id:1}}" slot="k8" slot-scope="text" style="color:#C49D18">查看售后订单</router-link>
					</a-table>
				</a-tab-pane>
				<a-tab-pane key="2" tab="团体订单">
					<div class="query">
						<a-range-picker class="marg20"  :locale="locale">
							<a-icon slot="suffixIcon" type="calendar" />
						</a-range-picker>
						<a-select default-value="lucy" style="width: 238px" class="marg20" >
							<a-select-option value="jack">
								已提交
							</a-select-option>
							<a-select-option value="lucy">
								已接单
							</a-select-option>
							<a-select-option value="Yiminghe">
								修剪中
							</a-select-option>
							<a-select-option value="Yiminghe1">
								已拒绝
							</a-select-option>
						</a-select>
						<a-input placeholder="请输入订单编号" class="marg20" style="width: 238px" />
						<a-button type="primary" class="marg20" size="Large">
							查询
						</a-button>
						<a-button type="primary" class="marg20" size="Large">
							新增售后
						</a-button>
					</div>
					<a-table class="table1" lign="center" :columns="columns2" :data-source="data">
						<router-link to="/MyAfterSales/AfterSaleGroup" slot="k8" slot-scope="text" style="color:#C49D18">{{ text }}</router-link>
					</a-table>
				</a-tab-pane>
				<a-tab-pane key="3" tab="现货订单">
					<div class="query">
						<a-range-picker class="marg20"  :locale="locale">
							<a-icon slot="suffixIcon" type="calendar" />
						</a-range-picker>
						<a-select default-value="lucy" style="width: 238px" class="marg20" >
							<a-select-option value="jack">
								已提交
							</a-select-option>
							<a-select-option value="lucy">
								已接单
							</a-select-option>
							<a-select-option value="Yiminghe">
								修剪中
							</a-select-option>
							<a-select-option value="Yiminghe1">
								已拒绝
							</a-select-option>
						</a-select>
						<a-input placeholder="请输入订单编号" class="marg20" style="width: 238px" />
						<a-button type="primary" class="marg20" size="Large">
							查询
						</a-button>
						<a-button type="primary" class="marg20" size="Large">
							新增售后
						</a-button>
					</div>
					<a-table class="table1" lign="center" :columns="columns3" :data-source="data">
						<div slot="k7" style="color:#C49D18">
							<a href="" style="color:#C49D18;margin-right: 10px;">查看</a>
							<a href="" style="color:#C49D18">返修</a>
						</div>
					</a-table>
				</a-tab-pane>
			</a-tabs>
		</div>

	</div>
</template>

<script>
	const columns = [{
		 title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
		},
		{
			title: '订单编号',
			dataIndex: 'orderSn',
			key: 'k2',
		},
		{
			title: '申请售后时间',
			dataIndex: 'createTime',
			key: 'k3',
		},
		{
			title: '面料编号',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '购买米数',
			key: 'k5',
			dataIndex: 'k5'
		},
		{
			title: '实际单价',
			key: 'k6',
			dataIndex: 'k6'
		},
		{
			title: '金额',
			key: 'k7',
			dataIndex: 'orderMoney',
			scopedSlots: {
				customRender: 'k7'
			},
		},
		{
			title: '操作',
			key: 'k8',
			dataIndex: 'k8',
			scopedSlots: {
				customRender: 'k8'
			},
		},
	];

	const data = [{
		k1: '1',
		k2: '23341964AQ',
		k3: '2020-06-01',
		k4: '2264AA',
		k5: '40米',
		k6: '400元/米',
		k7: '16000元',
		k8: '查看售后记录',
	}];

	const columns1 = [{
				 title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
		},
		{
			title: '订单编号',
			dataIndex: 'orderSn',
			key: 'k2',
		},
		{
			title: '订单名称',
			dataIndex: 'orderName',
			key: 'k3',
		},
		{
			title: '下单时间',
			key: 'k4',
			dataIndex: 'createTime'
		},
		{
			title: '客户姓名',
			key: 'k5',
			dataIndex: 'customerName'
		},
		{
			title: '客户代码',
			key: 'k6',
			dataIndex: 'customerCode'
		},
		{
			title: '金额',
			key: 'k7',
			dataIndex: 'orderMoney'
		},
		{
			title: '操作',
			key: 'k8',
			dataIndex: 'k8',
			scopedSlots: {
				customRender: 'k8'
			},
		},
	];



	const columns2 = [{
					 title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
		},
		{
			title: '订单编号',
			dataIndex: 'orderSn',
			key: 'k2',
		},
		{
			title: '订单名称',
			dataIndex: 'orderName',
			key: 'k3',
		},
		{
			title: '下单时间',
			key: 'k4',
			dataIndex: 'createTime'
		},
		{
			title: '公司名称',
			key: 'k5',
			dataIndex: 'customerName'
		},
		{
			title: '公司代码',
			key: 'k6',
			dataIndex: 'customerCode'
		},
		{
			title: '金额',
			key: 'k7',
			dataIndex: 'orderMoney'
		},
		{
			title: '操作',
			key: 'k8',
			dataIndex: 'k8',
			scopedSlots: {
				customRender: 'k8'
			},
		},
	];

	const columns3 = [{
			 title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
		},
		{
			title: '售后单编号',
			dataIndex: 'k2',
			key: 'k2',
		},
		{
			title: '售后日期',
			dataIndex: 'k3',
			key: 'k3',
		},
		{
			title: '产品名称',
			key: 'k4',
			dataIndex: 'k4'
		},
		{
			title: '产品货号',
			key: 'k5',
			dataIndex: 'k5'
		},
		{
			title: '原订单号',
			key: 'k6',
			dataIndex: 'k6'
		},
		{
			title: '操作',
			key: 'k7',
			dataIndex: 'k7',
			scopedSlots: {
				customRender: 'k7'
			},
		}
	];

    import {getAction} from "../../api/manage";
	// @ is an alias to /src
	import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
	export default {
		name: 'MyAfterSales',
		data() {
			return {
				token:localStorage.getItem("token"),
				 url: {
                    list: "/orderAfter/list"
				},
			
				 orderType: 0,
				locale,
				data,
				columns,
				columns1,
				columns2,
				columns3
			}
		},
		   created() {
         
            this.getOrder()
        },
		methods:{
		

      //新增面料售后
		xinzengmianliao(){
                  this.$route 
		},
              getOrder() {
                getAction(domain.publicUrl + this.url.list, {
                    'token': this.token,
                    'orderType': this.orderType
                }).then(res => {
                    this.data = res.data.data.records
                
                })
			},
		
		updateorderType(e){
			   this.orderType=e;
			 this.getOrder();
            
		},
		},
	}
</script>

<style scoped lang="scss">
	.my_after_sales {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		margin-top: 20px;
		padding: 20px 35px;

		.ant-tabs {
			color: #cccccc;
			font-size: 16px !important;
		}

		.query {
			display: flex;
		}

		.marg20 {
			margin-right: 20px;
		}

		.table1 {
			margin-top: 20px;
		}

	}
</style>
